.loading {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: default;
  z-index: 99999999;

  .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;
    z-index: 99999;
    transition: background ease-out 1s;

    .loadingbox {
      display: flex;
      line-height: 30px;
      background: white;
      border-radius: 3px;
      box-shadow: 3px 5px 10px #736d6d;
      padding: 6px 20px 6px 10px;
      transition: all ease-out .3s;
      opacity: 0;
      transform: translateY(50px);

      .icon {
        width: 30px;
        font-size: 15px;
        text-align: center;
        margin-right: 3px;
      }

      .desc {
        font-size: 12px;
      }
    }
  }

  &.in {
    .mask {
      background: rgba(0, 0, 0, 0.1);

      .loadingbox {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}